<template>
    <div class="main-container">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card class="card" shadow="never">
                    <div slot="header">
                        <span class="tips">警令类型管理列表</span>
                        <el-button type="success" class="right" icon="el-icon-plus" @click="handleEdit">新增</el-button>
                    </div>
                    <el-table
                            v-loading="listLoading"
                            ref="listTable"
                            stripe
                            :data="list"
                            :element-loading-text="elementLoadingText"
                            highlight-current-row
                            border
                            @current-change="handleCurrentChange"
                            height="calc(100vh - 310px)"
                    >
                        <template slot="empty">
                            <el-empty :image-size="200"></el-empty>
                        </template>
                        <el-table-column show-overflow-tooltip label="序号" align="center" width="50px;">
                            <template slot-scope="scope">
                                {{(queryForm.pageNo - 1) * queryForm.pageSize + scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="name" label="名称" width="200px"
                                         align="center"></el-table-column>
                        <el-table-column show-overflow-tooltip prop="point" label="得分" width="200px"
                                         align="center"></el-table-column>
                        <el-table-column show-overflow-tooltip prop="description" label="描述"
                                         align="center"></el-table-column>
                        <el-table-column show-overflow-tooltip label="操作" width="200" align="center">
                            <template #default="{ row }">
                                <el-button size="mini" plain type="primary" @click="handleEdit(row)">编辑</el-button>
                                <el-button size="mini" plain type="danger" @click="handleDelete(row)">删除</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                    <el-pagination
                            background
                            :current-page="queryForm.pageNo"
                            :page-size="queryForm.pageSize"
                            :layout="layout"
                            :total="total"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange2"
                    ></el-pagination>
                </el-card>
            </el-col>
        </el-row>
        <edit ref="edit" @fetch-data="fetchData"></edit>
    </div>
</template>

<script>
    import Edit from './components/edit'
    import {getWarningTypePage, doWarningTypeDelete} from '@/api/warningType'

    export default {
        name: 'warningTypeIndex',
        components: {Edit},
        data() {
            return {
                value1: '',
                checked: false,
                isShow: false,
                list: [],
                listLoading: true,
                layout: 'total, sizes, prev, pager, next, jumper',
                total: 0,
                selectRows: '',
                elementLoadingText: '正在加载...',
                queryForm: {
                    pageNo: 1,
                    pageSize: 10,
                    name: '',
                },
            }
        },
        created() {
            this.fetchData()
        },
        beforeDestroy() {
        },
        mounted() {
        },
        methods: {
            handleCurrentChange(val) {
                this.selectRows = val
            },
            handleEdit(row) {
                if (row.id) {
                    this.$refs['edit'].showDia(row.id)
                } else {
                    this.$refs['edit'].showDia()
                }
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm('你确定要删除当前项吗', null, async () => {
                        const {msg} = await doWarningTypeDelete(row.id)
                        if("-1" == msg){
                            this.$baseMessage('数据已被绑定，无法进行删除！', 'error')
                        }else{
                            this.$baseMessage('删除成功', 'success')
                            this.queryData()
                        }
                    })
                } else {
                    // if (this.selectRows.length > 0) {
                    //     const ids = this.selectRows.map((item) => item.id).join()
                    //     this.$baseConfirm('你确定要删除选中项吗', null, async () => {
                    //         const {msg} = await doWarningTypeDelete({ids})
                    //         this.$baseMessage(msg, 'success')
                    //         this.fetchData()
                    //     })
                    // } else {
                    //     this.$baseMessage('未选中任何行', 'error')
                    //     return false
                    // }
                }
            },
            handleSizeChange(val) {
                this.queryForm.pageSize = val
                this.fetchData()
            },
            handleCurrentChange2(val) {
                this.queryForm.pageNo = val
                this.fetchData()
            },
            queryData() {
                this.queryForm.pageNo = 1
                this.fetchData()
            },
            moreQuery() {
                this.isShow = !this.isShow
            },
            async fetchData() {
                this.listLoading = true
                const {data} = await getWarningTypePage(this.queryForm)
                this.list = data.list
                this.total = data.total
                setTimeout(() => {
                    this.listLoading = false
                }, 300)
            },
        },
    }
</script>
